<template>
    <div class="footPage">
        <el-pagination
            background
            hide-on-single-page
            layout="prev, pager, next"
            :total="pageInfo.total"
            @current-change="changePage"
        />
    </div>
</template>
<script>
export default {
    name: 'FootPage',
    props: {
        pageInfo: {
            type: Object,
            default() {
                return {
                    total: 0
                }
            }
        }
    },
    emits: ['changePage'],
    methods: {
        changePage(index) {
            this.$emit('changePage', index)
        }
    }
}
</script>

<style lang="scss" scoped>
.footPage {
    position: fixed;
    left: 100px;
    bottom: 40px;
    width: 100%;
    height: 50px;
    text-align: center;
}
</style>
